<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
    <title>Document</title>

</head>

<body>
    <div id="main" style="height: 400px;width:600px;"></div>
    <script>
        var myChart = echarts.init(document.getElementById('main'));
        var option = {
            xAxis: {
                name: "体重",
                type: "value",
                axisLable: {
                    show: true
                }
            },
            yAxis: {
                name: "年龄",
                data: ['张三', '李四', '王五', '闰土', '小明', '茅台', '二妞', '大强'],
                type: "category",
                axieLable: {
                    show: true
                }
            },
            series: [{
                data: [88, 92, 63, 77, 94, 80, 72, 86]
                , type: "bar",
                barWidth: 20,
                color: 'pink',
                markPoint: {
                    data: [
                        { type: 'max', name: '最大值' },
                        { type: 'min', name: '最小值' }
                    ]
                },
                markLine: {
                    data: [
                        { type: 'average', name: '平均值' }
                    ]
                },
                label: { show: true, position: ['50%', '40%'] }
            }]
        }
        myChart.setOption(option);
    </script>

</body>

</html>